<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta th:charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>K3Cloud | 银行存款日记账</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../static/build/css/app.min.css" th:href="${#fn.getStaticFile('/build/css/app.min.css')}">
    <link rel="stylesheet" href="../../static/dist/css/common.css" th:href="${#fn.getStaticFile('/dist/css/common.css')}">
    <link href="../../static/lib/plugins/handsontable/handsontable.full.css" th:href="@{/lib/plugins/handsontable/handsontable.full.css}" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../static/lib/plugins/bootstrap-daterangepicker/daterangepicker.css"  th:href="@{/lib/plugins/bootstrap-daterangepicker/daterangepicker.css}" type="text/css" media="all"/>
    <script src="../../static/build/js/app.min.js" th:src="${#fn.getStaticFile('/build/js/app.min.js')}"></script>
    <script src="../../static/lib/plugins/bootstrap-daterangepicker/moment.js" th:src="${#fn.getStaticFile('/lib/plugins/bootstrap-daterangepicker/moment.js')}" type="text/javascript"></script>
    <script src="../../static/lib/plugins/bootstrap-daterangepicker/daterangepicker.js"  th:src="${#fn.getStaticFile('/lib/plugins/bootstrap-daterangepicker/daterangepicker.js')}" type="text/javascript"></script>
    <script src="../../static/lib/plugins/handsontable/handsontable.full.js" th:src="${#fn.getStaticFile('/lib/plugins/handsontable/handsontable.full.js')}"></script>
    <script src="../../static/dist/js/common.js" th:src="${#fn.getStaticFile('/dist/js/common.js')}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            $("#btnSubmit").click(function(){
                $("#btnSubmit").attr("disabled", true);
                $("#inputForm").submit();
            });
            var codes=[[${codes}]];
            var settleTypes=[[${settleTypes}]];
            var bankNames=[[${bankNames}]];
            var codeMap=[[${codeMap}]];
            var expenseTypes=[[${expenseTypes}]];
            var otherTypes=[[${otherTypes}]];
            var departments=[[${departments}]];
            var users=[[${users}]];
            var customers=[[${customers}]];
            var otherCode =[[${otherCode}]];
            var companyName = $("#companyName").val();
            if(companyName=="JXDJ"){
                var headers = ["对方科目","结算方式","借方金额","贷方金额","银行帐号","摘要","对方科目全称"];
            }else if(companyName == "WZOPPO"){
                var headers = ["对方科目","结算方式","借方金额","贷方金额","银行帐号","摘要","对方科目全称","员工","部门","其他类","费用类",'对方关联客户'];
            }else{
                var headers = ["对方科目","结算方式","借方金额","贷方金额","银行帐号","摘要","对方科目全称","员工","部门","其他类","费用类"];
            }
            var columns = new Array();
            columns.push({type: "autocomplete", allowEmpty: false, strict: true, source: codes, width:80});
            columns.push({type: "autocomplete", allowEmpty: false, strict: true,source: settleTypes, width:80});
            columns.push({strict: true, width:80, type: 'numeric',format:"0,0.00"});
            columns.push({strict: true, width: 80, type: 'numeric',format:"0,0.00"});
            columns.push({type: "autocomplete", allowEmpty: false, strict: true, source: bankNames, width:100});
            columns.push({strict:true, width:100});
            columns.push({readOnly: true, strict:true, width:100});
            if(companyName != "JXDJ"){
                columns.push({type: "autocomplete", allowEmpty: false, strict: true, source: users, width:80});
                columns.push({type: "autocomplete", allowEmpty: false, strict: true, source: departments, width:100});
                columns.push({type: "autocomplete", allowEmpty: false, strict: true, source: otherTypes, width:120});
                columns.push({type: "autocomplete", allowEmpty: false, strict: true, source: expenseTypes, width:120});
            }
            if( companyName == "WZOPPO"){
                columns.push({type: "autocomplete", allowEmpty: true, strict: true, source: customers, width:150});
            }
            $("#grid").handsontable({
                colHeaders:headers,
                rowHeaders:true,
                height:650,
                minSpareRows: 1,
                columns:columns,
                stretchH: 'all',
                contextMenu: ['row_above', 'row_below', 'remove_row'],
                afterChange:function(changes, source) {
                    if (source !== 'loadData') {
                        for (var i = changes.length - 1; i >= 0; i--) {
                            var row = changes[i][0];
                            if (changes[i][1] == 0) {
                                var name = changes[i][3];
                                if(name=="") {
                                    $('#grid').handsontable('setDataAtCell', row, 6, '');
                                } else {
                                    $('#grid').handsontable('setDataAtCell', row, 6, codeMap[name]);
                                }
                            }
                        }
                    }
                    var ht = $('#grid').handsontable('getInstance');
                    var datas=ht.getNotEmptyData();
                    for(var i=0;i<datas.length; i++) {
                        var other="";
                        var subject="";
                        if(datas[i][0]) {
                            subject =datas[i][0];
                        }
                        if(datas[i][9]) {
                            other = datas[i][9];
                        }
                        if(other !="" && subject !=""){
                            if(other!='无'  && subject!=otherCode[other]){
                                $('#grid').handsontable('setDataAtCell', i, 9, '');
                                alert("其他类的代码前4位必须和对应科目的代码一致");
                            }
                        }
                    }
                    var ht = $('#grid').handsontable('getInstance');
                    ht.validateNotEmptyRows(function(){
                        ht.render();
                    });
                }
            });


            $("#inputForm").validate({
                invalidHandler: function(event, validator) {
                    $("#btnSubmit").attr("disabled",false);
                },submitHandler: function(form){
                    var invalidCount = $("#grid .htInvalid").length;
                    if(invalidCount>0) {
                        $("#btnSubmit").attr("disabled",false);
                        alert("请先处理错误信息。");
                        return;
                    }else{
                        var ht = $('#grid').handsontable('getInstance');
                        var data = JSON.stringify(ht.getNotEmptyData());
                        if(ht.getNotEmptyData()==''){
                            alert("没有填写任何数据！");
                            $("#btnSubmit").attr("disabled", false);
                        }else {
                            if (confirm("确认保存？")) {
                                $("#btnSubmit").attr("disabled", true);
                                $("#data").val(data);
                                form.submit();
                            } else {
                                $("#btnSubmit").attr("disabled", false);
                            }
                        }
                    }
                }
            });
            $("#companyName").on("change", function () {
                window.location.href= ctx+"cloud/depositJournal/bankForm?companyName="+$("#companyName").val();
            });
        });
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini " th:classappend="${#session.getAttribute('sidebarClass')}" th:with="pageCode='bankDepositJournalForm'">
    <div Class="wrapper">
    <div th:replace="fragment/layout :: header"></div>
    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="fragment/layout :: menu(activePageCode=${pageCode})"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <!-- Nav tabs -->
            <ul th:replace="fragment/menuTab :: menuTab(activePageCode=${pageCode})"></ul>
            <div class="panel panel-info">
                <div th:if="${message!=null}"  th:class="'alert alert-'+${message.type}" th:text="${message.code}"></div>
                <div class="panel-body">
                    <form class="form-inline pull-left" role="form" id="inputForm" th:action="@{/cloud/depositJournal/bankSave}" method="post">
                        <input type="hidden" name="token"  th:value="${token}"/>
                        <input type="hidden" id="data" name="data" value="" />
                        <div class="form-group">
                            <label for="companyName">账套</label>
                            <select name="companyName" id="companyName" class="form-control" style="width:180px;">
                                <option th:value="null" th:text="请选择账套"></option>
                                <option th:each="item : ${futureClouds}" th:value="${item}" th:text="${item}" th:selected="${companyName==item}">cloud</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="subject">科目</label>
                            <select name="subject" id="subject" class=" required form-control" style="width:200px;">
                                <option th:value="null" th:text="请选择科目"></option>
                                <option th:each="item : ${subjects}" th:value="${item.fnumber}" th:text="${item.fname}" th:selected="${subject == item}">科目</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="datepicker">日期</label>
                            <input type="text" id="datepicker" name="billDate"  class="form-control datepicker"  th:value="${datepicker}" readonly="readonly"  style="width:200px;" />
                        </div>
                        <button id="btnSubmit" type="button" class="btn btn-success">
                            <span class="glyphicon glyphicon-save"></span>保存
                        </button>
                    </form>
                </div>
                <div class="panel-body">
                    <div id="grid" style="margin-top:10px;"></div>
                </div>
            </div>
        </section>
    </div>
    <footer th:replace="fragment/layout :: footer"></footer>
</div>
</body>
</html>